<template>
<div class="read-list-cp">
    <div class="title">
        政策查询
    </div>
    <div class="container">
        <AutoMoveList
            :speed="0.3"
            :dataList="[{name:'测试'},{name:'测试12312'},{name:'测试123'},{name:'测试阿三大苏打'}]">
        </AutoMoveList>
        <AutoMoveList
            :speed="0.5"
            :dataList="[{name:'测试'},{name:'测试12312'},{name:'测试123'},{name:'测试阿三大苏打'}]">
        </AutoMoveList>
        <AutoMoveList
            :speed="1"
            :dataList="[{name:'测试'},{name:'测试12312'},{name:'测试123'},{name:'测试阿三大苏打'}]">
        </AutoMoveList>
        <AutoMoveList
            :speed="0.7"
            :dataList="[{name:'测试'},{name:'测试12312'},{name:'测试123'},{name:'测试阿三大苏打'}]">
        </AutoMoveList>
        <AutoMoveList
            :speed="0.2"
            :dataList="[{name:'测试'},{name:'测试12312'},{name:'测试123'},{name:'测试阿三大苏打'}]">
        </AutoMoveList>
    </div>
</div>
</template>

<script>
/*
 阅读列表组件
 */
import AutoMoveList from "./AutoMoveList";
export default {
    name: 'ReadList',
    components:{AutoMoveList},
    props:{
        itemData:{
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
        };
    },
    mounted(){
    },
    methods: {
    }
}
</script>

<style scoped lang="scss">
.read-list-cp{
    --my-border-color: #c5c5c5;
    --my-border-radius:12px;
    width: 240px;
    background-color: white;
    border-radius: var(--my-border-radius);
    border: 1px solid var(--my-border-color);
    box-sizing: border-box;
    display: grid;
    text-align: left;
    overflow: hidden;
    padding-bottom: 10px;
    opacity: 0.5;
    transition: all 0.2s;
    &:hover{
        opacity: 1;
    }
    >.title{
        width: fit-content;
        font-size: 20px;
        font-weight: bold;
        padding: 10px;
        box-sizing: border-box;
    }
    >.container{
        display: grid;
        grid-gap: 10px;
    }
}
</style>
